<section ng-controller="CategoryController">
	<h1 class="page-header">Quản lý danh mục</h1>
	
	<div class="col-xs-12 col-md-12 mg-b2">
		<form ng-submit="addForm.$valid && addCategory()" name="addForm" >
			<div class="col-md-2 f-bold">Tạo danh mục</div>
			<div class="col-md-2">
				<input type="text"  class="form-control " placeholder="Nhập tên..." ng-model="catName" name="catName" required>
			</div>
			<div class="col-md-8">
				<button type="submit" class="btn btn-primary" ng-disabled="addForm.$invalid"><span class="glyphicon glyphicon-plus"></span> Thêm</button>
			</div>
			<div class="alert fadeInDown animated" ng-class="{'alert-danger': !status, 'alert-success': status}" role="alert" ng-show="msg!=''">
				<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" ng-show="!status"></span>
				<span class="glyphicon glyphicon-ok" aria-hidden="true" ng-show="status"></span>
				{{msg}}
			</div>
		</form>
	</div>
	<div class="col-xs-12 col-md-12">
		<table class="table" ng-init="getCatList()">
			<tr class="f-bold">
				<td>Tên danh mục</td>
				<td>Xóa</td>
			</tr>
			<tr ng-repeat="item in catList">
				<td><a href="#" editable-text="item.name" onbeforesave="updateCatName($data,item.id)">{{ item.name}}</a></td>
				<td><a href="javascript:void(0)" ng-click="deleteCat($index,item.id)"><span class="glyphicon glyphicon-trash"></span></a></td>
			</tr>
			
		</table>
		<pagination 
			class="pagination-sm pull-right" 
			total-items="total1" 
			previous-text ="&laquo;"
			next-text ="&raquo;"
			max-size="5"
			first-text="Đầu"
			last-text="Cuối"
			items-per-page= "limit" 
			align="true"
			ng-model="curPage1" 
			ng-change="getCatList()"
			boundary-links="false">
		</pagination>
	</div>
	<div class="col-xs-12 col-md-12 mg-b2">
		<form ng-submit="addSubForm.$valid && addSubCategory()" name="addSubForm" >
			<div class="col-md-2 f-bold">Tạo danh mục con</div>
			<div class="col-md-2">
				<input type="text"  class="form-control " placeholder="Nhập tên..." ng-model="catSubName" name="catSubName" required>
			</div>
			<div class="col-md-3">
				<select class="form-control" ng-model="selectCat" name="selectCat" required ng-init="getAllCatList()">
					<option value="" selected>-- Chọn danh mục --</option>
					<option ng-repeat="item in catTotalList" value="{{item.id}}">{{item.name}}</option>
				</select>
			</div>
			<div class="col-md-5">
				<button type="submit" class="btn btn-primary" ng-disabled="addSubForm.$invalid"><span class="glyphicon glyphicon-plus"></span> Thêm</button>
			</div>
		</form>
	</div>
	<div class="col-xs-12 col-md-12">
		<table class="table" ng-init="getSubCatList()">
			<tr class="f-bold">
				<td>Tên danh mục con</td>
				<td>Tên danh mục cha</td>
				<td>Xóa</td>
			</tr>
			<tr ng-repeat="item in catSubList">
				<td><a href="#" editable-text="item.name" onbeforesave="updateSubCatName($data,item.id)">{{ item.name}}</a></td>
				<td>{{item.catName}}</td>
				<td><a href="javascript:void(0)" ng-click="deleteSubCat($index,item.id)"><span class="glyphicon glyphicon-trash"></span></a></td>
			</tr>
		</table>
		<pagination 
			class="pagination-sm pull-right" 
			total-items="total2" 
			previous-text ="&laquo;"
			next-text ="&raquo;"
			max-size="5"
			first-text="Đầu"
			last-text="Cuối"
			items-per-page= "limit" 
			align="true"
			ng-model="curPage2" 
			ng-change="getSubCatList()"
			boundary-links="false">
		</pagination>
	</div>
</section>